<script setup>
const props = defineProps({
  columns: { type: Array, default: () => ([]) },
  data: { type: Array, default: () => ([]) },
})

const spans = [...Array(13).keys()].filter(Boolean).reduce((acc, cur) => ((acc[cur] = 'col-span-' + cur, acc)), {})
const spanNum = computed(() => props.columns.reduce((acc, cur) => acc + (Number(cur.span) || 1), 0))
</script>

<template>
  <div v-if="spanNum > 2" class="grid border-l border-t"
    :style="{ 'grid-template-columns': `repeat(${spanNum}, minmax(0, 1fr)) !important` }">
    <div class="border-b border-r p-1 text-center" v-for="(d, i) in columns" :key="i" :class="spans[d.span || 1]">{{
      d.title }}
    </div>
    <template v-if="data.length">
      <template v-for="da in data">
        <div class="border-b border-r p-1" v-for="(d, i) in columns" :key="i" :class="spans[d.span || 1]">{{
          da[d.field] }}</div>
      </template>
    </template>
    <template v-else>
      <div class="border-b border-r p-1 text-center text-gray-500 col-span-full">暂无数据</div>
    </template>
  </div>
</template>